Escribo una función para agregar un oyente a todos los elementos que coincidan con un selector específico, como se muestra a continuación:
// Add event handler to all elements match a specific selector function addEventListenerToAll(selector, type, listener) { [].forEach.call(document.querySelectorAll(selector), function(element) { if (element) { element.addEventListener(type, listener); } }); }Luego invoco la función de la siguiente manera:
addEventListenerToAll(".myclass", "click", function () { var url = this.getAttribute('myurl'); // What is 'this' refers to? });Entonces, ¿a qué se refiere 'esto' en this.getAttribute ?
Según mi prueba, se refiere a uno de los elementos en el bucle foreach. Sin embargo, revisé este documento https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this y decía en "Contexto de clase", 'esto' en una función no estática se refiere al objeto de la clase actual; de lo contrario, el valor predeterminado es el objeto global; en el navegador, debería ser el objeto de la ventana .
Entonces, como la función de escucha no es una función de miembro de clase, ¿debería referirse a la ventana en su lugar?
A las funciones se les puede dar un alcance diferente a this que sería el predeterminado. Puede hacerlo usted mismo con el método de apply . (Editar: como @pilchard señaló a continuación, esto no se aplica a las funciones de flecha, que heredan el ámbito principal). En los detectores de eventos, this se refiere al elemento al que se aplicó el detector de eventos ( currentTarget ).